<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>临沂市消防监控系统</title>
    <link rel="stylesheet" type="text/css" href="../../lib/css/elementui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" href="../../lib/css/bootstrop.css" />
    <link rel="stylesheet" href="../../css/login.css">
    <!-- <link rel="stylesheet" href="../css/header.css">
     <link rel="stylesheet" href="../css/from.css">-->
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../lib/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/js/uilt.config.js"></script>
    <script src="../../../lib/js/uitl.js"></script>
    <script src="../../lib/js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="../../css/mues_side.css">
    <script src="../../lib/layui/layui.all.js"></script>
    <link rel="stylesheet" href="../../css/control_People.css">

</head>

<body>
<div id="cele">
    <el-container>
        <el-header >
            <el-row :gutter="20">
                <el-col :span="5">
                    <div class="header-bj header-left">
                        {{time}}
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="header-center">
                        <h3>消防联动预警平台</h3>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="header-right">
                        <div class="header-bj  header-text">
                            <p>{{FireManInfoModel.Fire_brigade_name}}</p>
                        </div>
                        <div class="header-bj  header-btn" @click="Quit">退出</div>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="220px"  style="margin-top: 10px;margin-left: 20px;">
                <el-row class="tac">
                    <el-col :span="24">
                        <div class="container-fluid">
                            <div class="row">
                                <div class=" main-left-bj background">
                                    <ul id="main-nav" class="nav nav-stacked" style="">
                                        <li>
                                            <a href="#jy" class="nav-header collapsed active" data-toggle="collapse">
                                                救援行动
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="jy" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="#">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                                                消防员
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="systemSetting" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">人员排版</a></li>
                                                <li><a href="#">人员信息维护</a></li>
                                                <li><a href="#">行动统计</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#wz" class="nav-header collapsed" data-toggle="collapse">
                                                微站管理
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="wz" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="#">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#tz" class="nav-header collapsed" data-toggle="collapse">
                                                通知管理
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="tz" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">人员排版</a></li>
                                                <li><a href="#">人员信息维护</a></li>
                                                <li><a href="#">行动统计</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#xf" class="nav-header collapsed active" data-toggle="collapse">
                                                消防知识
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="xf" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="#">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#xt" class="nav-header collapsed active" data-toggle="collapse">
                                                系统管理
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="xt" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="#">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <div class="main-nr">
                    <div class="main-nr-bj background">
                        <div>
                            <div class="row">
                                <div class="col-md-6">
                                    <el-tabs v-model="activeName" @tab-click="handleClick">
                                        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                                        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                                        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                                    </el-tabs>
                                </div>
                                <div class="col-md-6 pb-bjs">
32
                                </div>
                            </div>
                            <div class="main-nr-bj background">
                                <div class="row main-nr-pb">
                                    <div class="col-md-3 pb-bj background" v-for="(item,index) in VehicleClass">
                                        <p class="xiaofang">{{item.Vehicle_type}}</p>
                                        <div class="table-bj">
                                            <table class="text-center">
                                                <tbody>
                                                <tr>
                                                    <td>驾驶员：</td>
                                                    <td>{{item.Driver_name}}</td>
                                                </tr>

                                                <tr v-for="n in item.Solider_number">
                                                    <td>{{n}}号位：</td>
                                                    <td>{{item['Solider_name_'+n]}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>


<script src="../../lib/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/js/elementui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/config.js"></script>
<script src="../../js/control_People.js"></script>


<style>
    .el-icon-arrow-down:before {
        content: "\e62B";
        font-weight: 900;
        color: red;
    }
    .el-icon-minus:before{
        content:"\e621";
        font-weight: 900;
        color: yellow;
    }
    .main-table table td {
        line-height: 30px;
        color: #fff;
    }
    .bgcolor {
        color: #fff;
        border-radius: 100px;
        font-size: 12px;
        /* padding: 2px 10px; */
        display: inline;
        width: 80px;
        height: 24px;
        line-height: 20px;
        background: red;
        border: red;
    }
    table#tbody tr:nth-child(1) span{
        background: red!important;
    }
    table#tbody tr:nth-child(2) span{
        background: #BAC100!important;
    }
    .xiaofang{
        font-weight: 900;
        font-size: 16px;
        text-align: center;
    }
</style>

</html>